<template>
  <div class="workbench_header">
    <el-avatar :size="72" src="/resource/img/logo.png"></el-avatar>
    <div class="desc">
      <h1 class="title">早安, {{ userInfo.name }}, 开始您一天的工作吧！</h1>
      <span class="sub_title"> 今日晴，20℃ - 32℃！ </span>
    </div>

    <div class="data_info">
      <div class="item">
        <span class="item_title"> 待办 </span>
        <span class="item_data">2/10</span>
      </div>
      <div class="item">
        <span class="item_title"> 项目 </span>
        <span class="item_data">8</span>
      </div>
      <div class="item">
        <span class="item_title"> 团队 </span>
        <span class="item_data">300</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store/index'

export default defineComponent({
  setup() {
    const store = useStore()

    const userInfo = computed(() => store.state.login.userInfo)

    return {
      userInfo
    }
  }
})
</script>

<style lang="scss" scoped>
.workbench_header {
  padding-top: 12px;
  display: flex;
  align-items: center;

  .desc {
    margin-left: 24px;
    display: flex;
    flex-direction: column;

    .title {
      color: #000000;
      font-size: 18px;
      line-height: 28px;
      font-weight: 540;
    }

    .sub_title {
      font-size: 14px;
      line-height: 28px;
      color: #00000073;
    }
  }

  .data_info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .item {
      display: flex;
      flex-direction: column;
      text-align: right;

      .item_title {
        color: #00000073;
        font-size: 14px;
      }

      .item_data {
        font-size: 24px;
        line-height: 36px;
      }

      &:nth-child(2) {
        margin: 0 64px;
      }

      &:nth-child(3) {
        margin-right: 40px;
      }
    }
  }
}
</style>
